<template>
	<div class="kp-register">
		<header class="regis_header">
			<div class="regis_text">
				<span class="regis_s" @click="filmReturn"></span>
			</div>
		</header>
		<div class="regis_content">
			<div class="redgis_title"><span class="regis_span">快票出行欢迎您！</span></div>
			<div class="regis">
				<form>
					<div class="input_regins">
						<input type="text" name="" placeholder="手机号码" v-model="tel" @input="inputband" maxlength="11" /><span class="input_span" v-show="isdel" @click="teldel"></span>
					</div>
					<div class="input_regins">
						<input type="text" name="" placeholder="短信验证码" v-model="yzm" @input="inputband" />
						<span class="input_ver vergray" v-if="is_card">{{yzms}}</span>
						<span class="input_ver" v-else @click="verCode">{{yzms}}</span>
					</div>
					<div class="input_regins" v-if="isPass">
						<input type="password" name="" placeholder="输入密码，8-14位字母或数字" maxlength="14" v-model="pass" @input="inputband" />
						<span class="input_spanb" @click="xs"></span>
					</div>
					<div class="input_regins" v-else>
						<input type="text" name="" placeholder="输入密码，8-14位字母或数字" maxlength="14" v-model="pass" @input="inputband" />
						<span class="input_spankj" @click="xs"></span>
					</div>
					<div class="input_regins" v-if="isRegis">
						<input type="text" name="" placeholder="请输入邀请码(选填)" v-model="yqm" />
					</div>
					<!--<input type="text" value="注册并登录" class="inp_sub inp_gray"/>-->
					<div class="inp_sub inp_gray tc" v-if="isRedist">注册并登录</div>
					<div class="inp_sub tc" v-else @click="regist">注册并登录</div>
				</form>
			</div>
			<div class="regis_code" v-if="!isRegis" @click="isRegis = !isRegis"><span>我有邀请码</span></div>

		</div>
		<div class="regis_agree"><span>点击注册即同意<em @click="xieyi">《快票出行注册协议》</em></span></div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				isRegis: false, //是否有邀请码
				isRedist: true, //是否注册登录
				isdel: false, //删除手机号\n
				isPass: true, //是否显示密码
				pass: '', //密码
				tel: '', //手机号
				yzm: '', //验证码
				yqm: '', //邀请码
				i: 60,
				yzms: "获取验证码",
				is_card: false,
			}
		},
		mounted() {
			//载入后执行
			// 		let loginParams = { userName: this.msg, userPwd: this.msg };
			// 		Login(loginParams)
			// 			.then(function(res) {
			// 				console.log(res);
			// 			})
			// 			.catch(function(err) {
			// 				console.log(err);
			// 			});
		},
		methods: {
			//方法放置
			filmReturn() {
				this.$router.go(-1)
			},
			xs() {
				this.isPass = !this.isPass
			},
			inputband() {
				if(this.tel != '') {
					this.isdel = true;
				} else {
					this.isdel = false;
				}
				if(this.tel != '' && this.yzm != '' && this.pass != '') {
					this.isRedist = false;
				} else {
					this.isRedist = true;
				}
			},
			teldel() { //手机号删除
				this.tel = '';
				this.isdel = false;
				if(this.tel != '' && this.yzm != '' && this.pass != '') {
					this.isRedist = false;
				} else {
					this.isRedist = true;
				}
			},
			verCode() { //获取验证码
				//验证手机号
				var regs = /^[1][3,4,5,7,8][0-9]{9}$/;
				if(this.tel == "") {
					this.$toast('手机号不能为空')
					return false;
				} else if(!regs.test(this.tel)) {
					this.$toast('请输入正确的手机号')
					return false;
				} else {
					this.is_card = !this.is_card;
					let time = window.setInterval(() => {
						this.yzms = "(" + (this.i--) + ")秒后重新发送";
						if(this.i == -1) {
							window.clearInterval(time);
							this.is_card = !this.is_card;
							this.yzms = "获取验证码";
							this.i = 60;
						}
					}, 1000)
					let param = {
						phone: this.tel,
						type: 'regist'
					}
					var that = this;
					this.$http.post(
						this.$baseUrl.baseurl + 'kpcx/sendMsg',
						param
					).then(function(res) {
						console.log(res);
						if(res.data.Code == 0) {

						} else {
							console.log(res.data.msg);
							that.$toast(res.data.msg);
						}

					}).catch(error => {

					});
				}

			},
			regist() {
				var zimu = /^[a-zA-Z]+$/
				var num = /^[0-9]+$/;
				var regs = 11 && /^((13|14|15|17|18|16|19)[0-9]{1}\d{8})$/;
				if(this.tel == "") {
					this.$toast('手机号不能为空')
					return false;
				} else if(this.yzm == '') {
					this.$toast('验证码不能为空');
					return false;
				} else if(this.pass == '') {
					this.$toast('密码不能为空');
					return false;
				} else if(!regs.test(this.tel)) {
					this.$toast('请输入正确的手机号')
					return false;
				} else if(this.pass.length < 8 || num.test(this.pass) || zimu.test(this.pass)) {
					this.$toast('密码需要8到14位字母和数字');
					return false;
				} else {
					let that = this;
					let param = {
						phone: this.tel,
						"smsCode": this.yzm,
						"passWord": this.pass,
						"InvitationOthers": this.yqm,
					}
					this.$http.post(
						this.$baseUrl.baseurl + 'kpcx/registerForApp',
						param
					).then(function(res) {
						if(res.data.Code == 0) {
							that.$router.push({
								path: '/login',
								query: {
									pass: 'regist',
								}
							})
						} else {
							that.$toast(res.data.msg);
						}

					}).catch(error => {

					});
				}
			},
			xieyi(){
				this.$router.push({
					path:'/termsofservice'
				})
			}
		},
		created() {
			//创建后
		},
		watch: {
			//监听放置
		},
		components: {

		},
		computed: {}
	};
</script>

<style>
	.kp-register {
		background: #fff;
		min-height: 100vh;
	}
	
	.regis_header {
		height: 68px;
	}
	
	.regis_text {}
	
	.regis_s {
		display: inline-block;
		width: 36px;
		height: 36px;
		background: url("../../assets/fanhui.png") 0 0;
		background-size: cover;
		margin: 32px 0 0 30px;
	}
	
	.redgis_title {
		height: 181px;
		border-bottom: 1px solid rgba(183, 183, 183, 0.3);
	}
	
	.regis_span {
		font-size: 48px;
		color: rgb(51, 51, 51);
		font-weight: 700;
		line-height: 1;
		display: inline-block;
		margin: 66px 0 66px 30px;
	}
	
	.regis {
		padding: 0 30px;
		font-family: "MicrosoftYaHei";
	}
	
	.input_regins {
		width: 690px;
		height: 110px;
		padding: 30px 0;
		box-sizing: border-box;
		border-bottom: 1px solid rgba(183, 183, 183, 0.3);
		position: relative;
		display: -webkit-flex;
		display: flex;
	}
	
	.input_regins>input {
		border: none;
		outline: none;
		font-size: 32px;
		font-family: "MicrosoftYaHeiLight";
		width: 100%;
		flex: 1;
		-webkit-box-flex: 1;
		height: 42px;
		line-height: 42px;
		letter-spacing: 0;
	}
	
	.input_regins>input::-webkit-input-placeholder {
		color: rgb(138, 138, 138);
	}
	
	.input_span {
		display: inline-block;
		width: 28px;
		height: 28px;
		margin-top: 7px;
		background: url("../../assets/qingchu.png") 0 0 no-repeat;
		background-size: cover;
	}
	
	.input_ver {
		font-size: 32px;
		color: rgb(59, 195, 194);
		height: 42px;
		line-height: 42px;
	}
	
	.inp_sub {
		border: none;
		background: rgb(59, 195, 194);
		width: 679px;
		height: 80px;
		border-radius: 40px;
		color: #fff;
		font-size: 36px;
		outline: none;
		margin: 60px 5px 0;
		line-height: 80px;
	}
	
	.input_spanb {
		display: inline-block;
		width: 44px;
		height: 30px;
		margin-top: 7px;
		background: url("../../assets/bukejian.png") 0 0 no-repeat;
		background-size: cover;
	}
	
	.input_spankj {
		display: inline-block;
		width: 44px;
		height: 30px;
		margin-top: 7px;
		background: url("../../assets/kejian.png") 0 0 no-repeat;
		background-size: cover;
	}
	
	.inp_gray {
		background: rgb(216, 216, 216);
	}
	
	.regis_code {}
	
	.regis_code>span {
		color: rgb(59, 195, 194);
		font-size: 30px;
		display: block;
		margin: 40px auto 0;
		width: 150px;
		letter-spacing: 0;
	}
	
	.regis_agree {
		position: fixed;
		bottom: 28px;
		width: 100%;
	}
	
	.regis_agree>span {
		margin: 0 auto;
		color: rgb(138, 138, 138);
		font-size: 26px;
		display: block;
		width: 470px;
	}
	
	.regis_agree>span>em {
		color: rgb(59, 195, 194);
	}
	
	.vergray {
		color: rgb(216, 216, 216);
	}
</style>